<template>
	<view>
		<view class="head">
			<swiper class="swiper" indicator-dots autoplay style="height: 400rpx">
				<swiper-item v-for="(item,index) in datainfo.thumb" :key="index">
					<image class="swpierimag" :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="headtitle">
				<text>{{datainfo.title}}</text>
				<view class="prizecontent">
					<text class="font-colors">¥ {{datainfo.price}}</text>
					<text class="small-font">剩余{{datainfo.remaining}}件</text>
				</view>
			</view>
		</view>
		<view class="couponcontanier" v-if="coupon">
			<view class="coupon" >
				<view class="left">
					<view class="money">¥ {{parseInt(coupon.price)}}</view>
					<view class="shop">
						<view class="eli">{{coupon.title}}</view>
						<view class="timer">
							<view class="timeitem">{{hours}}</view>
							<text>时</text>
							<view class="timeitem">{{minutes}}</view>
							<text>分</text>
							<view class="timeitem">{{seconds}}</view>
							<text>秒</text>
							<view>失效</view>
						</view>
					</view>
				</view>
				<view class="right">
					<text>{{couponstatus[coupon.status-1]}}</text>
				</view>
			
				<view class="line">
					<view class="point"></view>
					<view class="deash"></view>
					<view class="point"></view>
				</view>
			</view>
		</view>
		
		<view class="detail">
			<text class="explain">商品说明</text>
			<jyf-parser :html="datainfo.details" :selectable="true"></jyf-parser>
		</view>
		<view class="bottomitem">
			<view class="buttons" @click="showbuydetail" v-if="coupon">立即购买（券后价：¥{{datainfo.price-coupon.price}}元）</view>
			<view class="buttons" @click="saveinfo" v-else>设为奖品</view>
		</view>
		
		<!--支付订单详情-->
		<ejectbox :visible="visible" :autoheight="autoheight" v-if="coupon">
			<view class="shopdetails">
				<view class="shopsbox">
					
				 	<image v-if="datainfo.thumb" :src="datainfo.thumb[0]" mode="aspectFill"></image>
				 	<view class="shopsright">
				 		<view class="shopstitle">{{datainfo.title}} </view>
				 		<view class="shopsprice"><text class="smallfont">¥</text> {{datainfo.price}}</view>
				 	</view>
				 </view>
				 <!--优惠券抵扣-->
				<view class="deduction">
					<view>优惠券抵扣</view>
					<view style="color: #FF0000;">-{{coupon.price}}元</view>
				</view>
				<!--收货地址-->
				<view class="deduction">
					<view>收货地址</view>
					<view class="eli" @click="gotochoiceaddr">{{address}}</view>
				</view>
				
				<!--提交-->
				<view class="buybutton" @click="couponbuy">微信支付（¥ {{datainfo.price-coupon.price}}）</view>
			</view>
		</ejectbox>
		
		<!--加载遮罩-->
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	/*
	 * 奖品商城详情页
	 */
	export default {
		data() {
			return {
				address:'点击填写收货地址',
				globelloading:true,
				visible:false,
				autoheight:1080,
				datainfo: '',
				prizeimg: '', //编辑奖品图片数组
				prizeIndex: 0, //奖品图片索引
				coupon:'',//优惠券对象
				couponstatus:['可使用','已使用','已过期'] ,// 状态:1,,2,3
				hours:0,
				minutes:0,
				seconds:0,
				//临时商品数据
				tmpprize:{
					red_envelope_type: 'count', //'红包类型:count:总金额,sign单个红包
					red_envelope_money: '', //红包金额
					grant: 'address', //'address','contact_me 发放方式'
					title: '', //奖品标题
					count: 1, //奖品数量
					thumb: '/static/image/topdefault.png',
					//发起人信息
					contactinfo: {
						id: '', //发起人ID
						attention_text: '', //需要复制的内容
					},
					goods_id: '', //商城商品id,
					goods_price: 0, //商品的金额
					coupon_id:'',//卡券ID
				},
			}
		},
		onLoad(option) {
			uni.$on("closewindown", (option) => {
				this.visible = option;
				this.autoheight = 1080;
			})
			console.log(option)
			//是否为优惠券过来的数据
			if(option.coupon){
				this.coupon =  JSON.parse(option.coupon); 
				 console.log(this.coupon );
				this.countdown(this.coupon.expiration_time);
			}
			let lottey = uni.getStorageSync('lettytables');
			if(!lottey){
				//创建内存
				lottey = this.$luckinit
				uni.setStorageSync('lettytables',this.$luckinit)
			}
			if (option.prizeindex) {
				this.prizeimg = lottey.prizeimgarr;
				this.prizeIndex = option.prizeindex;
			}
			this.getinfo(option);
		},
		onShow() {
			this.wxaddress()
		},
		watch:{
			datainfo(){
				this.globelloading =false;
			}
		},
		methods: {
			//添加收货地址
			wxaddress(){
				let ainfo = uni.getStorageSync('address');
				if(ainfo){
					this.address = ainfo.realname + ',' + ainfo.phone + ',' + ainfo.area + ainfo.address;
				}
			},
			//倒计时
			countdown(strstarttime) {
				let date = strstarttime;
				date = date.substring(0, 19);
				date = date.replace(/-/g, '/');
				let starttime = new Date(date).getTime() / 1000;
				let dates = starttime - Date.parse(new Date()) / 1000;
				this.hours = parseInt(dates/(60 *60)) > 0 ? parseInt(dates/(60 *60)): 0;
				this.minutes = parseInt((dates % (60 * 60)) / 60) > 0 ? parseInt((dates % (60 * 60)) / 60) : 0;
				this.seconds = dates % 60 > 0 ? dates % 60 : 0;
				//console.log(dates);
				//console.log(starttime,Date.parse(new Date()) / 1000)
				if(!this.hours && !this.minutes && !this.seconds){
					return;
				}
				let interval = setInterval(()=>{
					this.hours = parseInt(dates/(60 *60));
					this.minutes = parseInt((dates % ( 60 * 60)) / 60);
					this.seconds = dates % 60;
					dates--;
					if(dates<0){
						clearInterval(interval);
						console.log('描述结束')
					}
				},1000);
				
			},
			saveinfo() {			
				this.prizeimg[this.prizeIndex - 1].goods_id = this.datainfo.id; //奖品商城id
				this.prizeimg[this.prizeIndex - 1].thumb = this.datainfo.cover; //奖品商城缩略图
				this.prizeimg[this.prizeIndex - 1].goods_price = this.datainfo.price; //奖品商城价格
				this.prizeimg[this.prizeIndex - 1].title = this.datainfo.title; //奖品商城标题

				//存入内存
				let lottey = uni.getStorageSync('lettytables');
				lottey.prizeimgarr = this.prizeimg;
				uni.setStorageSync('lettytables', lottey);
				this.$ShowMsg('奖品选择成功！');
				setTimeout(() => {
					uni.navigateBack({
						delta:2
					})
				}, 1500);
			},
			
			
			//获取详情
			getinfo(option) {
				console.log(option.id);
				this.$HttRequest({
					url: '/product/details',
					param: {
						id: option.id
					},
				}, 'GET', true).then((res) => {
					if (res.status === 10000) {
						console.log(res);
						this.datainfo = res.data;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			//打开购买详情
			showbuydetail(){
				this.visible = true;
				this.autoheight = 450;
			},
			//选择收货地址
			gotochoiceaddr(){
				uni.navigateTo({
					url:'/pages/address/addresslist'
				})
			},
			//优惠券下单购买
			couponbuy(){
				let addrinfo = uni.getStorageSync('address');
				if(!addrinfo){
					this.$ShowMsg('请选择收货地址！');
					return
				}
				let _this=this;
				_this.$HttRequest({
					url: '/product/buy',
					param: {
						id: this.datainfo.id,
						coupon_id:this.coupon.id,
						address_id:addrinfo.id,
					},
				}, 'POST', true).then((res) => {
					if (res.status === 10000) {
						uni.requestPayment({
							provider:"wxpay",
							orderInfo:res.data,
							success() {
								//兑换后的积分存入内存中
								uni.removeStorageSync('address');
								_this.$ShowMsg('商品购买成功！');
								setTimeout(()=>{
									uni.redirectTo({
										url:"/pages/member/order"
									})
								},2000)
							},fail(error) {
								_this.$ShowMsg('订单已取消！')
								setTimeout(()=>{
									uni.redirectTo({
										url:"/pages/member/order"
									})
								},2000)
							}
						})
					} else {
						_this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					_this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			
			//优惠券选择跳转抽奖
			coupondreaw(){
				this.tmpprize.goods_id = this.datainfo.id; //奖品商城id
				this.tmpprize.thumb = this.datainfo.cover; //奖品商城缩略图
				this.tmpprize.goods_price = this.datainfo.price-this.coupon.price; //奖品商城价格
				this.tmpprize.title = this.datainfo.title; //奖品商城标题
				this.tmpprize.coupon_id = this.coupon.id; 
				this.tmpprize.count = 1;
				//存入内存
				let lottey = uni.getStorageSync('lettytables');
				//奖品数量
				let count = 0;
				let couponuse = '';
				lottey.prizeimgarr.map((item,index)=>{
					//去除空数组
					if(item.title && item.thumb && item.count){
						count += 1;
						//查询卡券是否已使用过
						if(item.coupon_id == this.coupon.id){
							couponuse +=1;
						}
					}else{
						lottey.prizeimgarr.splice(index,1);
					}
					
				})
				if(count>=5){
					this.$ShowMsg('奖品数量已满！');
					return
				}
				if(couponuse.indexOf(1) != -1 ){
					this.$ShowMsg('此卡券已使用');
					return
				}
				lottey.prizeimgarr = lottey.prizeimgarr.concat(this.tmpprize);
				uni.setStorageSync('lettytables', lottey);
				this.$ShowMsg('奖品选择成功！');
				setTimeout(() => {
					uni.navigateTo({
						url:'/pages/release/launch?continueedit=closewicket'
					})
				}, 1500);
			}
		}
	}
</script>

<style lang="scss">
	.shopdetails{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		.buybutton{
			width: 100%;
			height: 90rpx;
			background-color: $uni-color-primary;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-weight: bold;
			font-size: 30rpx;
			margin: 40rpx 0;
			border-radius: 35rpx;
		
		}
		.deduction{
			padding: 40rpx 0;
			width: 100%;
			border-bottom: 1rpx solid #F1F1F1;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.eli {
				font-weight: bold;
				color: #000;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 80%;
			}
		}
		.shopsbox{
			border-bottom: 1rpx solid #F1F1F1;
			padding-bottom: 20rpx;
			width: 100%;
			
			display: flex;
			justify-content: flex-start;
			align-items: center;
			image{
				width: 150rpx;
				height: 150rpx;
				margin-right: 30rpx;
				border: 1rpx solid #e6e6e6; 
			}
			.shopsright{
				display: flex;
				justify-content: center;
				align-items: flex-start;
				font-size: 32rpx;
				font-weight: bold;
				flex-direction: column; 
				.shopstitle{
					margin-bottom: 10rpx;
				}
				.shopsprice{
					
					color: #FF0000;
					text{
						font-weight: normal;
						margin-right: 5rpx;
						font-size: 22rpx;
					}
				}
			}
			
		}
	}
	
	.couponcontanier {
		width: 90%;
		margin: 0 auto;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.coupon {
		margin: 20rpx 0;
		color: #fff;
		width: 100%;
		height: 150rpx;
		background-color: $uni-color-primary;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	
		.line {
			position: absolute;
			right: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
	
			.point {
				width: 10rpx;
				height: 10rpx;
				background-color: #fff;
				border-radius: 50%;
			}
	
			.deash {
				margin: 8rpx 0;
				height: 125rpx;
				width: 1rpx;
				border-left: 1rpx dashed #fff;
			}
		}
	
		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			
			.money {
				font-size: 35rpx;
				margin: 0 20rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
	
			.shop {
				width: 350rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				
			.eli {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 85%;
			
		}
				.timer {
					margin-top: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
	
					.timeitem {
						color: $uni-color-primary;
						display: flex;
						justify-content: center;
						align-items: center;
	
						width: 50rpx;
						height: 30rpx;
						background-color: #fff;
	
					}
	
					text {
						margin: 0 10rpx;
					}
				}
			}
		}
	
		.right {
			font-size: 30rpx;
			text-align: center;
			width: 160rpx;
		}
	}
	
	.bottomitem {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: 1rpx solid #e6e6e6;
		background-color: #fff;

		.buttons {
			background-color: $uni-color-primary;
			color: #fff;
			height: 80rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			width: 90%;
			margin: 20rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.swpierimag {
		width: 750rpx;
		height: 400rpx;
	}

	.detail {
		display: flex;
		justify-content: center;
		flex-direction: column;
		font-size: 32rpx;
		padding: 20rpx;
		flex: 1;

		.explain {
			font-size: 35rpx;
			margin-bottom: 10rpx;
			font-weight: bold;
		}
	}

	.head {
		display: flex;
		justify-content: center;
		flex-direction: column;
		flex: 1;
		border-bottom: 20rpx #f0f0f0 solid;

		.headtitle {
			width: 90%;
			margin: 0 auto;
			font-size: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin-top: 20rpx;

			.prizecontent {
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.font-colors {
					color: $uni-color-primary;
					font-weight: bold;
					font-size: 35rpx;
				}

				.small-font {
					font-size: 25rpx;
					color: #c0c0c0;
				}
			}

		}
	}
</style>
